<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type:none;
            margin: 0;
            padding:0;
            border: solid 0px red;
            width: 400px;
            height: 240px;
        }
        ul>li{
            border: 0px solid green;
            padding: 0 15px;
            margin-top: 20px;
            padding-bottom: 10px;
            border-bottom: solid 1px #ccc;
        }
        .focus{
            background-color: #0392cc;
            cursor: pointer;
            color: white;
        }
        span{
            margin: 0;
            padding: 0;
        }
        #top{
            padding: 0;
            border: solid 0px red;
            width: 400px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #eee;
            overflow: hidden;
        }
        #top>span{
            float: left;
            border: solid 0px #0392cc;
            width: 100px;
            height: 40px;
            border-radius: 2px;
        }
        #top>span:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="top">
        <span>热点新闻</span>
        <span>合作播报</span>
        <span>行业资讯</span>
        <span class="focus">运营攻略</span>
    </div>
    <div id="list">
        <ul>
            <li>[运营攻略] 加盟网络棋牌游戏的注意事项</li>
            <li>[运营攻略] 加盟网络棋牌游戏的注意事项</li>
            <li>[运营攻略] 加盟网络棋牌游戏的注意事项</li>
            <li>[运营攻略] 加盟网络棋牌游戏的注意事项</li>
        </ul>
    </div>
    <script>
        function myfunction(id,txt){
                spans=document.getElementsByTagName("span");
                spans[id].onclick=function(){
                // console.log("test");
                for(var i=0;i<4;i++){
                    //改变内容
                    document.getElementsByTagName("li")[i].innerText=txt;
                    //将所有的标题class样式清除
                    spans[i].className="none"
                }
                //给当前标题添加选中样式
                spans[id].className="focus"
            }
        }
        
        myfunction(0,"[热点新闻] 这是热点新闻");
        myfunction(1,"[合作播报] 这是合作播报");
        myfunction(2,"[行业资讯] 全球总决赛的注意事项");
        myfunction(3,"[运营攻略] 加盟网络棋牌游戏的注意事项");
        // document.getElementsByTagName("span")[0].onclick=function(){
        //     // console.log("test");
        //     for(var i=0;i<4;i++){
        //         document.getElementsByTagName("li")[i].innerText="[热点新闻] 这是热点新闻";
        //         document.getElementsByTagName("span")[i].className="none"
        //     }
        //     document.getElementsByTagName("span")[0].className="focus"
        // }
        // document.getElementsByTagName("span")[1].onclick=function(){
        //     // console.log("test");
        //     for(var i=0;i<4;i++){
        //         document.getElementsByTagName("li")[i].innerText="[合作播报] 这是合作播报";
        //         document.getElementsByTagName("span")[i].className="none";
        //     }
        //     document.getElementsByTagName("span")[1].className="focus"
        // }
        // document.getElementsByTagName("span")[2].onclick=function(){
        //     // console.log("test");
        //     for(var i=0;i<4;i++){
        //         document.getElementsByTagName("li")[i].innerText="[行业资讯] 全球总决赛的注意事项";
        //     }

        // }
        // document.getElementsByTagName("span")[3].onclick=function(){
        //     // console.log("test");
        //     for(var i=0;i<4;i++){
        //         document.getElementsByTagName("li")[i].innerText="[运营攻略] 加盟网络棋牌游戏的注意事项";
        //     }

        // }
    </script>
</body>
</html>